import { Card as AntCard, type CardProps as AntCardProps } from 'antd-mobile'
import { cn } from '@/lib/utils'

interface CardProps extends AntCardProps {
  variant?: 'default' | 'book' | 'activity'
  hoverable?: boolean
}

export function Card({ 
  variant = 'default', 
  hoverable = true,
  className,
  children,
  ...props 
}: CardProps) {
  const baseClasses = 'overflow-hidden transition-all duration-300 ease-in-out'
  
  const variantClasses = {
    default: 'bg-white border border-gray-100 rounded-2xl shadow-sm',
    book: 'bg-white rounded-2xl shadow-md hover:shadow-xl hover:-translate-y-1',
    activity: 'bg-gradient-to-br from-[#FFF8DC] to-[#FAF8F3] rounded-2xl border border-yellow-100'
  }[variant]
  
  const hoverClasses = hoverable ? 'hover:shadow-lg hover:-translate-y-1 cursor-pointer' : ''
  
  return (
    <AntCard
      className={cn(baseClasses, variantClasses, hoverClasses, className)}
      {...props}
    >
      {children}
    </AntCard>
  )
}